<!--
 * @Author: wangming
 * @Date: 2021-04-15 15:38:32
 * @LastEditors: wangming
 * @LastEditTime: 2022-03-24 18:06:00
 * @Description: 数据字段
-->
<template>
  <div>
    <el-form-item
      label="日期字段"
      prop="__config.searchKey"
      :rules="[
        {
          required: true,
          message: '日期字段不能为空',
          trigger: 'change',
        },
      ]"
    >
      <el-select
        v-model="value.__config.searchKey"
        placeholder="请选择"
        size="small"
        class="mb10"
        value-key="code"
        style="width: 100%"
      >
        <el-option
          v-for="(item, index) in myEntitymodelList"
          :key="index"
          :label="item.name"
          :value="item.code"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="日期渲染">
      <el-button
        @click="editJsx"
        type="primary"
        icon="el-icon-edit"
        plain
        size="mini"
        >代码编辑</el-button
      >
    </el-form-item>
    <el-form-item label="默认加载" class="tr">
      <el-switch v-model="value.__config.defaultLoad" />
    </el-form-item>
  </div>
</template>

<script>
import basicmixins from "./basicmixins";
import monacoEditor from "./hlTableList/monacoEditor/index.js";
import { getHmentitymodelList } from "@/apis/paas/HmEntityModelController.js";
const template = `/**
 * 
 * @param {*} h 系统预留字段
 * @param {*} param1  {context:页面工具类对象,type:日历类型(按年：type='year',按月：type='month'),date:日期节点时间对象Date,tableData:相关业务模型数据,vm:{createData,state} }
 * 例: vm.createData({a:1})  声明一个双向绑定对象  赋值给state  
 * 例: vm.state.a  输出属性 a 可以在视图双向绑定
 * @param {*} rootScope  页面公共事件对象
 * @returns 
 */
function render(h, { context,type,date,tableData,vm },rootScope) {
  return <div>{date.getTime()}</div>
}`;
export default {
  mixins: [basicmixins],
  watch: {
    "value.__config.modelCode": {
      handler: function (v) {
        if (!!v) {
          this.value.__config.searchKey = "";
          this.getList(v);
        }
      },
    },
  },
  mounted() {
    !!this.value.__config.modelCode &&
      this.getList(this.value.__config.modelCode);
  },
  data() {
    return {
      myEntitymodelList: [],
    };
  },
  methods: {
    editJsx() {
      let jsx = this.value.__config.renderJsx || template;
      monacoEditor.showEdit(decodeURIComponent(jsx)).then((res) => {
        this.value.__config.renderJsx = encodeURIComponent(res);
      });
    },
    async getList(modelKey) {
      let myEntitymodelList = await getHmentitymodelList({
        modelKey,
        activated: true,
      });
      this.myEntitymodelList = myEntitymodelList.filter(
        (i) => i.type === "DATE" && !i.builtIn
      );
    },
  },
};
</script>

<style lang="scss" scoped></style>
